<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/fileinput.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script src="/js/fileinput_locale_zh.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<div id="myVue"></div>
<div>
	<a href="javascript:history.back(-1)" class="btn btn-primary btn-lg active" role="button">返回</a>
</div>
<div class="box box-default" style="margin-top: 20px;">
	<div class="box-body">
		<div id="form_div1">
			<form id="my_form1" action="/admin/casual_xc_save" method="post" enctype="multipart/form-data">
				<input type="hidden" name="res_full_name" value="{{$res_full_name}}">
				<input type="hidden" name="res_id" value="{{$res_id}}">
				<div class="form-group">
					<label>问题种类</label>
					<select class="form-control" name="ques_type">
						@foreach($ques_type as $qk => $qv)
						<option value="{{$qk}}">{{$qv}}</option>
						@endforeach
					</select>
				</div>
				<div class="form-group">
					<label>处理部门</label>
					<select class="form-control" name="dep">
						@foreach($department as $dk => $dv)
						<option value="{{$dk}}">{{$dv}}</option>
						@endforeach
					</select>
				</div>
				<div class="form-group">
					<label id='ques_desc_lable'>问题描述</label>
					<textarea class="form-control ques_desc" rows="5" name="ques_desc" id="ques_desc1"></textarea>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1" name="is_handled">当场处理
					</label>
				</div>
				<div class="form-group">
					<input id="my_img1" name="my_img[]" type="file" multiple class="file" data-overwrite-initial="false"  accept="image/*" data-min-file-count="1">
				</div>
			</form>
			<div class="upload-file-stateWrap">
        		<span class="upload-file-result"></span>            
		        <div class="progress hidden">
		            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
		                <span class="progress-bar-status">0%</span>
		            </div>
		        </div>
    		</div>
		</div>
		<div id="img_div1" style="text-align: center;">
			<img class="img-rounded" id="jia1" src="/images/jiahao.jpg" width="100px;" height="100px;" onclick="create_form(this.id)">
		</div>
		<div id="submit_div" class="col-xs-8" style="margin-left: 17%;margin-top: 30px;margin-bottom: 50px;">
			<input style="background-color:#b53131;font-size: 30px;" type="submit" class="btn btn-primary btn-block btn-lg" name="my_submit" id="my_submit" value="提&nbsp;&nbsp;交">
		</div>
	</div>
</div>
<script type="text/javascript">
	function create_form(id)
	{
		var index1 = id.charAt(3);
		var index2 = parseInt(id.charAt(3))+1;
		var form_id = "my_form"+index2;
		var form_div = "form_div"+index2;
		var ques_type = "ques_type"+index2;
		var dep = "dep"+index2;
		var ques_desc = "ques_desc"+index2;
		var is_handled = "is_handled"+index2;
		var my_img_id = "my_img"+index2;
		var my_img_name = "my_img"+index2+"[]";
		var img_div = "img_div"+index2;
		var jia = "jia"+index2;
		$('#form_div'+index1).after('<div id="'+form_div+'"><div style="float:right;font-size:21px;fontWeight:700;lineHeight:1;color:#000;padding-right:10px;" id="remove_'+form_id+'" onclick="remove_form('+index2+')">×</div><form id="'+form_id+'" method="post" action="/admin/casual_xc_save"  enctype="multipart/form-data" style="border:1px solid #D5D5D7;padding:25px 5px 5px 5px"><input type="hidden" name="res_full_name" value="{{$res_full_name}}"><input type="hidden" name="res_id" value="{{$res_id}}"><div class="form-group"><label>问题种类</label><select class="form-control" name="ques_type">@foreach($ques_type as $qk => $qv)<option value="{{$qk}}">{{$qv}}</option>@endforeach</select></div><div class="form-group"><label>处理部门</label><select class="form-control" name="dep">@foreach($department as $dk => $dv)<option value="{{$dk}}">{{$dv}}</option>@endforeach</select></div><div class="form-group"><label id="ques_desc_lable">问题描述</label><textarea class="form-control ques_desc" rows="5" name="ques_desc" id="'+ques_desc+'"></textarea></div><div class="checkbox"><label><input type="checkbox" value="1" name="is_handled">当场处理</label></div><div class="form-group"><input id="'+my_img_id+'" name="my_img[]" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"  accept="image/*"></div></form></div><div id="'+img_div+'" style="text-align: center;"><img class="img-rounded" id="'+jia+'" src="/images/jiahao.jpg" width="100px;" height="100px;" onclick="create_form(this.id)"></div>');
			load_img_input(index2);
			$("#img_div"+index1).remove();
			$("#my_form"+index1).after('<div class="fengexian" style="height: 5px;background-color: #b53131;margin-bottom: 30px;margin-top: 30px;"></div>');
	}
	function remove_form(index)
	{
		$("#form_div"+index).children().remove();
		$("#remove_my_form"+index).remove();
	}

	function load_img_input(index)
	{
		$("#my_img"+index).fileinput({
			showUpload: false,
			//uploadUrl: '/admin/xc_img_upload', 
	        language: 'Zh',
	        uploadAsync: false,
	        dropZoneEnabled: false,
			maxFileCount: 3,
	        showCaption: false,
	        showPreview: true,
	        showRemove: false,
	        previewFileType: "image",
	        browseClass: "btn btn-info btn-block",
	        browseLabel: "选择图片",
	        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
	        removeFromPreviewOnError:true,                //当文件不符合规则，就不显示预览
	        initialCaption: "请拍照上传异常详情图片",//文本框初始话value
	        allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
	        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
	        preferIconicZoomPreview:true,
	        previewSettings: {
            	image: {width: "213px", height: "160px"},
        	}
		});	
	}
	window.onload = load_img_input(1);
	$("#my_submit").click(function(){
		let bool = false;
		for(let i=0;i<$(".ques_desc").length;i++){
			if(!$(".ques_desc")[i].value){
				bool = true;
			}
		}
		if(bool){
			rc.msg.alert("必须输入问题描述！","错误");
			return false;
		}
		
		
		//获取form表单的id,使用ajax提交表单
		$("form").each(function(index,item){
			var FormId = $(this).attr("id");
			$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

			$("#"+FormId).ajaxSubmit({
				beforeSubmit:function(){
					let myVue = new Vue({
						el:"#myVue",
						mounted:function() {
							const loading = this.$loading({
								lock: true,
								text: '正在上传图片……',
								spinner: 'el-icon-loading',
								background: 'rgba(0, 0, 0, 0.7)'
							});
						}
					})
				},
				
				complete: function(xhr) {//完成
					rc.msg.alert("巡场成功！","提示信息",function(){
						window.location.href='/admin/casual_xc';
					});
            	}
            });
		});
	});
	

	var rc = window.rc || {};
	rc.msg = {
	    alert: function(message, title, callback) {
	        if (title == null) title = "提示信息";
	        rc.msg._show(title,
	            message,
	            null,
	            "alert",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    confirm: function(message,title, callback) {
	        if (title == null) title = "操作确认";
	        rc.msg._show(title,
	            message,
	            null,
	            "confirm",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    _show: function(title, msg, value, type, callback) {
	        var html = "";
	        html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + "</span>";
	        html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
	        if (type == "alert") {
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        if (type == "confirm") {
	            html += '<input id="mb_btn_no" type="button" value="取消" />';
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        html += "</div></div>";
	 
	        //必须先将_html添加到body，再设置Css样式  
	        $("body").append(html);
	        rc.msg.initCss();
	 
	        switch (type) {
	        case "alert":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                callback(true);
	            });
	            $("#mb_btn_ok").focus().keypress(function(e) {
	                if (e.keyCode == 13 || e.keyCode == 27) {
	                    $("#mb_btn_ok").trigger("click");
	                }
	            });
	            break;
	        case "confirm":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                if (callback) callback(true);
	            });
	            $("#mb_btn_no").click(function() {
	                rc.msg._hide();
	                if (callback) callback(false);
	            });
	            $("#mb_btn_no").focus();
	            $("#mb_btn_ok, #mb_btn_no").keypress(function(e) {
	                if (e.keyCode == 13) $("#mb_btn_ok").trigger("click");
	                if (e.keyCode == 27) $("#mb_btn_no").trigger("click");
	            });
	            break;
	        }
	    },
	    _hide: function() {
	        $("#mb_box,#mb_con").remove();
	    },
	    initCss: function() {
	        $("#mb_box").css({
	            width: "100%",
	            height: "100%",
	            zIndex: "99999",
	            position: "fixed",
	            filter: "Alpha(opacity=60)",
	            backgroundColor: "black",
	            top: "0",
	            left: "0",
	            opacity: "0.6"
	        });
	 
	        $("#mb_con").css({
	            zIndex: "999999",
	            width: "350px",
	            height: "200px",
	            position: "fixed",
	            backgroundColor: "White",
	        });
	 
	        $("#mb_tit").css({
	            display: "block",
	            fontSize: "14px",
	            color: "#444",
	            padding: "10px 15px",
	            backgroundColor: "#fff",
	            borderRadius: "15px 15px 0 0",
	            fontWeight: "bold",
	            "border-bottom": "1px solid #ddd"
	        });
	 
	        $("#mb_msg").css({
	            padding: "20px",
	            lineHeight: "40px",
	            textAlign: "center",
	            fontSize: "18px",
	            color: "#4c4c4c"
	        });
	 
	        $("#mb_ico").css({
	            display: "block",
	            position: "absolute",
	            right: "10px",
	            top: "9px",
	            border: "1px solid Gray",
	            width: "18px",
	            height: "18px",
	            textAlign: "center",
	            lineHeight: "16px",
	            cursor: "pointer",
	            borderRadius: "12px",
	            fontFamily: "微软雅黑"
	        });
	 
	        $("#mb_btnbox").css({ margin: "15px 0px 10px 0", textAlign: "center" });
	        $("#mb_btn_ok,#mb_btn_no").css({
	            width: "80px",
	            height: "30px",
	            color: "white",
	            border: "none",
	            borderRadius: "4px"
	        });
	        $("#mb_btn_ok").css({ backgroundColor: "#b53131" });
	        $("#mb_btn_no").css({ backgroundColor: "gray", marginRight: "40px" });
	 
	 
	        //右上角关闭按钮hover样式  
	        $("#mb_ico").hover(function() {$(this).css({ backgroundColor: "Red", color: "White" });},
	            function() {$(this).css({ backgroundColor: "#DDD", color: "black" });});
	 
	        var width = document.documentElement.clientWidth; //屏幕宽  
	        var height = document.documentElement.clientHeight; //屏幕高  
	 
	        var boxWidth = $("#mb_con").width();
	        var boxHeight = $("#mb_con").height();
	 
	        //让提示框居中  
	        $("#mb_con").css({ top: (height - boxHeight) / 2 + "px", left: (width - boxWidth) / 2 + "px" });
	    }
	};
</script>
